<script setup>
import BannerView from '../layout/bannerView.vue'
import VideoList from '../layout/videoList.vue';
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
const banner_list = ref([])
const video_list = ref([]);
const isMobile = ref(false);
import AOS from "aos";
import { printInfo } from '@/util/log';
import HeaderView from '../layout/AppHeader.vue'
import { useRouter } from "vue-router";
import { useStore } from 'vuex';

const store = useStore();

const router = useRouter();

const isLoggedIn = computed(() => !!store.state.Authorization)
// 检测设备类型
const checkDeviceType = () => {
  const userAgent = navigator.userAgent;
  const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
  isMobile.value = isMobileDevice;
};

const queryVideoList = async () => {
  try {
    const res = await axios.post(import.meta.env.VITE_HOST + '/api.php');
    video_list.value = res.data.data;
    banner_list.value = res.data.banner;
  } catch (error) {
    printInfo({ title: "哎呀出错啦", text: error, type: "error", plain: true });
  }
}
queryVideoList();
const isVideoListEmpty = computed(() => {
  return video_list.value.length === 0;
});

onMounted(() => {
  checkDeviceType();
  AOS.init({
    easing: "ease", // AOS 动画默认 easing
    mirror: true, // 滚动到元素上方时是否应设置动画
    initClassName: "aos-init", // 初始化后使用的 class 类
    duration: 500, // 取值范围 0-3000, 每多 1 加 50ms
    debounceDelay: 50, // 调整窗口大小时使用的 (高级)
    throttleDelay: 100, // 滚动页面时使用的延迟 (高级)
    offset: 0, // 从原始触发点的偏移量 (px)
  });
  if (isLoggedIn.value) {
    printInfo({ title: "登录成功", text: "欢迎回来", type: "success", plain: true });
  } else {
    printInfo({ title: "登录失败", text: "请检查你的登录信息", type: "error", plain: true });
    router.push("/login");
    store.dispatch('logout');
  }
});
</script>
<template>
  <div class="nav"><HeaderView></HeaderView></div>
  <div class="box">
    <div class="home-header mt6" v-if="!isMobile">
    <div class="wrapper flex flex-col lg:flex-row" v-if="banner_list.length > 0">
      <BannerView class="home-header__banner" :data="banner_list" />
    </div>
  </div>
    <div class="bodys">
      <span class="fs24px" data-aos="fade-up" data-aos-duration="500">热门动漫</span>
      <div v-if="!isVideoListEmpty"><VideoList :videos="video_list" data-aos="fade-up" data-aos-duration="500"/></div>
      <div v-else>
        <el-empty description="当前内容为空" />
      </div>
    </div>
  </div>
  <div class="footer">
    <p
      style="display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      opacity: 0.6;
      margin: 20px 0;"
    >
      Copyright © {{ new Date().getFullYear() }}
      <el-link
        type="primary"
        href="#/"
        style="margin: 0 5px;"
      >动漫宇宙</el-link>
      . All Rights Reserved.
    </p>
  </div>
</template>
<style lang="scss">
.bodys {
  margin: 0 auto;
  margin-top: 50px;
  width: 80%;
}
.banner {
  width: 90%;
  margin: 0 auto;
  margin-top: 50px;
}
.box {
  margin-top: 70px;
}
.home-header {
  .home-header__banner {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
  }
  .home-header__notice {
    .notice-body {
      .notice-body__title {
        box-sizing: border-box;
      }
    }
  }
}
.wrapper {
  padding: 0 60px;
}
@media (min-width: 1536px) {
  .wrapper {
    padding: 0 140px;
  }
}
</style>
